<template>
	<view>
		<view class="main">
			<view class="title">添加云剪辑</view>
			<view class="tit"><text>*</text>任务名称</view>
			<input v-model="row.title" placeholder="随意取个名字吧" />
			<view class="tit"><text></text>视频配音BGM</view>
			<input v-model="row.bg_audio" disabled placeholder="音乐格式支持：MP3、ogg、wav" />
			<shmily-drag-image :delImage="delImage2" v-model="audioArr" keyName="url"
				v-if="audioArr.length!=0"></shmily-drag-image>
			<view class="flex align between btns">
				<view class="flex btn-item1" @click="toUploadAudio()">
					<uni-icons type="upload" size="20" color="#fff"></uni-icons>
					<text>上传</text>
				</view>
				<view class="flex btn-item2" @click="toUrl(3)"><uni-icons type="list" size="20"
						color="#fff"></uni-icons>
					<text>选择音频</text>
				</view>
			</view>
			<view class="tit"><text>*</text>视频随机素材</view>
			<input v-model="row.video1" disabled placeholder="视频格式支持：MP4、ogg、WebM、mov ; 图片格式支持：jpg、png、jpeg" />
			<shmily-drag-image :delImage="delImage" v-model="imgVideoArr" keyName="url"
				v-if="imgVideoArr.length!=0"></shmily-drag-image>
			<!-- <view class="fileList flex align">
				<view class="file-item" v-for="(item,index) in imgVideoArr" :key="index">
					<video :src="item.url" v-if="item.type=='video'" controls></video>
					<image :src="item.url" v-if="item.type=='img'"></image>
					<view class="del" @click="toDelItem(index)">删除</view>
				</view>
			</view> -->
			<view class="tips">可上传多个视频与图片随机混剪，每个视频时长应该在5秒以上</view>
			<view class="flex align between btns btns2">
				<view class="flex btn-item1" @click="toUpload()">
					<uni-icons type="upload" size="20" color="#fff"></uni-icons>
					<text>上传</text>
				</view>
				<view class="btn-item2" @click="toUrl(2)">
					选择视频
				</view>
				<view class="btn-item2" @click="toUrl(1)">
					选择图片
				</view>
			</view>
			<view class="tit"><text>*</text>视频尺寸</view>
			<view class="checkbox">
				<uni-data-checkbox v-model="check" :localdata="range" @change="change"></uni-data-checkbox>
			</view>
			<view class="tit"><text>*</text>剪辑视频数</view>
			<input v-model="row.video_count" placeholder="剪辑视频数" />
			<view class="tit"><text>*</text>预计时长（秒）</view>
			<input v-model="row.video_time" placeholder="预计时长（秒）" />
			<view class="subBtn" @click="toComfirm()">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		generalAttachment,
		aliossNotify
	} from '@/api/apiData.js';
	import {
		uploadOss
	} from '@/until/oss/oss.js'
	export default {
		data() {
			return {
				value: '',
				range: [{
					"value": 1,
					"text": "手机竖屏版"
				}, {
					"value": 2,
					"text": "电脑横屏版"
				}],
				check: 1,
				imgArr: [],
				videoArr: [],
				audioArr: [],
				imgVideoArr: [],
				row: {
					title: '',
					video1: '',
					bg_audio: '',
					video_count: '1',
					video_time: '30',
					type: 1,
					view_size: 1,
					transition_open: 1,
					open_subtitle: 1,
					sound_type: 'aiyue'
				}
			};
		},
		onShow() {
			if (uni.getStorageSync('imgVideoArr')) {
				this.imgVideoArr = uni.getStorageSync('imgVideoArr')
				let arr = []
				this.imgVideoArr.forEach((item => {
					arr.push(item.url)
				}))
				this.row.video1 = arr.toString()
			}
			if (uni.getStorageSync('audio')) {
				this.audioArr = uni.getStorageSync('audio')
				let arr2 = []
				this.audioArr.forEach((item => {
					arr2.push(item.url)
				}))
				this.row.bg_audio = arr2.toString()
			}

		},
		methods: {
			// 上传视频/图片
			toUpload() {
				let that = this
				// uni.showLoading({
				// 	title: "loading",
				// 	mask: true
				// })
				uni.chooseMedia({
					count: 9,
					mediaType: ['image', 'video'],
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {
						console.log(res)
						let fileArr = res.tempFiles
						let length = fileArr.length
						fileArr.forEach((item, index) => {
							console.log(item.tempFilePath)
							that.toOss(item.tempFilePath, index, item.fileType, item.size,new Date().getTime())
						})
					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			// 上传音频
			toUploadAudio() {
				let that = this
				uni.chooseMessageFile({
					count: 1,
					extension: [".mp3"],
					success: (res) => {
						console.log("从聊天记录中获取文件", res);
						const {
							errMsg,
							tempFiles
						} = res;
						if (errMsg == "chooseMessageFile:ok" && tempFiles.length) {
							const {
								name,
								size,
								path
							} = tempFiles[0];
							console.log("临时文件", {
								size,
								path
							});
							if (name.slice(-4) != ".mp3") {
								return uni.showToast({
									icon: "none",
									title: "请上传mp3文件！",
									duration: 2000,
								});
							}
							that.toOss(path, 1, 'audio', size,name)
							// this.uploadFile(path);
						}
					},
				});
			},
			async toOss(item, index, fileType, size,name) {
				const time = uni.$u.timeFormat(new Date().getTime(), 'yyyymm/dd')
				let ossPath = await uploadOss({
					filePathFore: time + '/',
					filePath: item,
				})
				let url = 'https://hongchuquan.oss-cn-shanghai.aliyuncs.com/' + ossPath
				console.log(url)
				if (fileType == 'audio') {
					let arr = [{
						type: fileType,
						url: url
					}]
					this.audioArr = this.audioArr.concat(arr)
					let arr2 = []
					this.audioArr.forEach((item => {
						arr2.push(item.url)
					}))
					this.row.bg_audio = arr2.toString()
					uni.setStorageSync('audio', this.audioArr);
				}
				if (fileType == 'image'||fileType == 'video') {
					let arr = [{
						type: fileType,
						url: url
					}]
					this.imgVideoArr = this.imgVideoArr.concat(arr)
					let arrs = []
					this.imgVideoArr.forEach((item => {
						arrs.push(item.url)
					}))
					this.row.video1 = arrs.toString()
					uni.setStorageSync('imgVideoArr', this.imgVideoArr);
				}

				// this.toComf(url, fileType, size,name)
			},
			async toComf(url, fileType, size,name) {
				uni.showLoading({
					title: "loading",
					mask: true
				})
				const result = await aliossNotify({
					url: url,
					name: name,
					size: size,
					type: fileType,
				})
				if (result.code == 1) {
					uni.hideLoading()
					uni.showToast({
						title: '上传成功'
					})
				} else {
					uni.hideLoading()
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			// 确定剪辑
			toComfirm() {
				if(this.imgVideoArr.length!=0){
					let arrs = []
					this.imgVideoArr.forEach((item => {
						arrs.push(item.url)
					}))
					this.row.video1 = arrs.toString()
				}
				if(this.audioArr.length!=0){
					let arr2 = []
					this.audioArr.forEach((item => {
						arr2.push(item.url)
					}))
					this.row.bg_audio = arr2.toString()
				}
				let that = this
				let obj = {
					'row[title]': this.row.title,
					'row[video1]': this.row.video1,
					'row[bg_audio]': this.row.bg_audio,
					'row[video_count]': this.row.video_count,
					'row[video_time]': this.row.video_time,
					'row[type]': this.row.type,
					'row[view_size]': this.row.view_size,
					'row[transition_open]': this.row.transition_open,
					'row[open_subtitle]': this.row.open_subtitle,
					'row[sound_type]': this.row.sound_type,
				}
				console.log(obj)
				if (this.row.title == '') {
					uni.showToast({
						title: '请输入任务名称',
						icon: 'error'
					})
					return false
				}
				if (this.row.video1 == '') {
					uni.showToast({
						title: '请上传视频素材',
						icon: 'error'
					})
					return false
				}
				uni.showLoading({
					title: "loading",
					mask: true
				})
				uni.request({
					url: 'https://jzxt.jiugezixun.cn/storeadmin/make_video/add?type=1',
					data: obj,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'XMLHttpRequest',
						'Cookie': uni.getStorageSync('cookies') // 从存储中读取cookies并设置到请求头
					},
					success: result => {
						if (result.data.code == 1) {
							uni.showToast({
								title: '添加成功'
							})
							setTimeout(()=>{
								uni.removeStorageSync('audio')
								uni.removeStorageSync('imgVideoArr')
								uni.navigateBack()
							},500)
						} else {
							uni.showToast({
								title: result.data.msg,
								icon: 'none'
							})
						}
					},
					fail: result => {
						uni.hideLoading();
					}
				})
			},
			sortList() {
				console.log(this.imgVideoArr)
			},
			delImage(done) {
				let that = this
				uni.showModal({
					content: '是否删除?',
					success: (res) => {
						if (res.confirm) {
							// 执行 done() 删除

							done()
							let arr = []
							that.imgVideoArr.forEach((item => {
								arr.push(item.url)
							}))
							that.row.video1 = arr.toString()
							uni.setStorageSync('imgVideoArr', that.imgVideoArr);
						}
					}
				})
			},
			delImage2(done) {
				let that = this
				uni.showModal({
					content: '是否删除?',
					success: (res) => {
						if (res.confirm) {
							// 执行 done() 删除
							done()
							let arr = []
							that.audioArr.forEach((item => {
								arr.push(item.url)
							}))
							that.row.bg_audio = arr.toString()
							uni.setStorageSync('audio', that.audioArr);
						}
					}
				})
			},
			change(e) {
				console.log(e)
				this.row.view_size = e.detail.value

			},
			toUrl(n) {
				uni.navigateTo({
					url: '/pages/material/material?type=' + n
				})
			},
			toDelItem(index) {
				this.imgVideoArr.splice(index, 1)
				let arr = []
				this.imgVideoArr.forEach((item => {
					arr.push(item.url)
				}))
				this.row.video1 = arr.toString()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin-top: 15rpx;
		background: white;
		padding: 7rpx 30rpx;

		.fileList {
			flex-wrap: wrap;
			margin: 30rpx 0;

			image,
			video {
				width: 150rpx;
				height: 150rpx;
			}

			.file-item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			.del {
				background: #FF0000;
				color: white;
				text-align: center;
				line-height: 2;
				font-size: 22rpx;
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.tit {
			font-size: 28rpx;
			margin: 17rpx 0;

			text {
				color: #FF0000;
			}
		}

		input {
			padding: 14rpx 15rpx;
			font-size: 20rpx;
			border: solid 1rpx #707070;
			border-radius: 10rpx;
		}

		.btns {
			margin: 20rpx 40rpx;

			view {
				width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				justify-content: center;
				color: white;
				text-align: center;
			}

			.btn-item1 {
				background: #DD4E3D;
			}

			.btn-item2 {
				background: #5D9CEB;
			}

			text {
				margin-left: 10rpx;
			}
		}

		.btns2 {
			margin: 20rpx 0;

			view {
				width: 200rpx;
			}
		}

		.tips {
			font-size: 20rpx;
			margin: 15rpx 0;
		}

		.subBtn {
			font-size: 30rpx;
			color: white;
			padding: 8rpx 95rpx;
			background: #5D9CEB;
			width: fit-content;
			margin: 137rpx auto;
			border-radius: 10rpx;
		}
	}
</style>